<template>
  <div id="container" :data="data">
    <chartTitle :title="title"></chartTitle>
    <div class="main">
      <div id="chartBox" class="chartBox"></div>
      <div class="textBox">
        <p class="p1">总人数<span>{{Object.keys(data).length>0 && data.total? data.total: 0}}</span></p>
        <p class="p2">在线人口<span>{{Object.keys(data).length>0 && data.onlineNumber? data.onlineNumber: 0}}</span></p>
      </div>
    </div>
  </div>
</template>

<script>
import chartTitle from '../chart-title/index.vue'
export default {
  components: {
    chartTitle
  },
  name: 'itemBox',
  props: {
    title: String,
    data: Object
  },
  data() {
    return {}
  },
  mounted() {
    this.$nextTick(() => {
      this.onInit()
    })
  },
  updated() {
    this.$nextTick(() => {
      this.onInit()
    })
  },

  methods: {
    onInit() {
      var value = Object.keys(this.data).length>0 && this.data.rate? this.data.rate: 0 //当前进度
      var maxValue = 100 //进度条最大值
      var pipe = this.$echarts.init(document.getElementById('chartBox'))
      var option = {
        // title: {
        //   //标题内容
        //   text: '张飞',
        //   textStyle: {
        //     fontWeight: 'bold',
        //     fontFamily: 'Microsoft YaHei',
        //     fontSize: 24
        //   },
        //   //标题位置
        //   top: '5%',
        //   left: '5%'
        // },
        //环形中间文字
        graphic: [
          //第一行文字
          //内容 + 位置
          {
            type: 'text',
            left: 'center',
            top: '35%',
            style: {
              //value当前进度
              text: (value / maxValue) * 100 + '%',
              textAlign: 'center',
              fill: '#fff',
              fontSize: 12
            }
          },
          //第二行文字
          //内容 + 位置
          {
            type: 'text',
            left: 'center',
            top: '60%',
            style: {
              //maxValue进度条最大值
              text: '在线率',
              textAlign: 'center',
              fill: '#999',
              fontSize: 12
            }
          }
        ],
        series: [
          {
            type: 'pie',
            radius: ['88%', '75%'], //['外圆大小', '内圆大小']
            center: ['50%', '50%'], //圆心位置['左右'， '上下']
            hoverAnimation: false, //取消鼠标悬停动画
            animationEasing: 'cubicOut', //设置动画缓动效果
            //取消显示饼图自带数据线条
            labelLine: {
              normal: {
                show: false
              }
            },
            //增加阴影效果
            // itemStyle: {
            //   normal: {
            //     shadowBlur: 200,
            //     shadowColor: 'rgba(44, 196, 196, 0.8)'
            //   }
            // },
            data: [
              //value当前进度 + 颜色
              {
                value: value,
                itemStyle: {
                  normal: {
                    color: '#73DEB3'
                  }
                }
              },
              //(maxValue进度条最大值 - value当前进度) + 颜色
              {
                value: maxValue- value,
                itemStyle: {
                  normal: {
                    color: '#50565C'
                  }
                }
              }
            ]
          }
        ]
      }
      pipe.setOption(option)
      //随着浏览器窗口大小改变而改变
      window.addEventListener('resize', function() {
        pipe.resize()
      })
    }
  }
}
</script>

<style lang="less" scoped>
#container {
  width: 100%;
  height: 20.4vh;
  color: #fff;
  background-color: rgba(7, 38, 46, 0.2);
  // border: 1px solid rgba(194, 215, 253, .2);

  .main {
    margin-top: 1vh;
    display: flex;
    // justify-content: space-between;
    // justify-content: center;
    align-items: center;
    background-image: url(../../image/index/itemBg3.png);
    background-size: 100% 100%;
    width: 100%;
    height: 13vh;
    padding-left: 5vh;
    position: relative;
    .chartBox {
      position: absolute;
      width: 30%;
      height: 80%;
      left: 5%;
      top: 12%;
      margin: auto;
    }
    .textBox {
      text-align: center;
      margin-left: 11vh;
      p {
        margin: 0;
      }
      .p1 {
        margin-left: 2vh;
        color: #fff;
        font-size: 1.6vh;
        span {
          margin-left: 2vh;
          font-size: 2vh;
          font-weight: bold;
          color: #ffd32d;
        }
      }
      .p2 {
        margin-left: 2vh;
        color: #fff;
        font-size: 1.6vh;
        span {
          margin-left: 2vh;
          font-size: 2vh;
          font-weight: bold;
          color: #06ffb2;
        }
      }
    }
  }
}
</style>
